overviewControls: Hide the appDisplay when it's not shown

Hiding actors allows excluding them from layout, so by hidding the
appDisplay in all the cases where the overviewAdjustment is not actually
showing it, we can save a lot of time on the first frame of painting
the overview because we no longer have to layout the whole appGrid.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1755>

diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index 72542b38138ade82c7bbe248ddfa40aea7332381..2a0dd3c66d7bbb9a049bc160317fb1e3239fa727 100644 (file)
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -179,23 +179,26 @@ class ControlsManagerLayout extends Clutter.BoxLayout {
         this._workspacesDisplay.allocate(workspacesBox);
 
         // AppDisplay
-        const workspaceAppGridBox =
-            this._cachedWorkspaceBoxes.get(ControlsState.APP_GRID);
-
-        params = [box, searchHeight, dashHeight, workspaceAppGridBox];
-        let appDisplayBox;
-        if (!transitionParams.transitioning) {
-            appDisplayBox =
-                this._getAppDisplayBoxForState(transitionParams.currentState, ...params);
-        } else {
-            const initialBox =
-                this._getAppDisplayBoxForState(transitionParams.initialState, ...params);
-            const finalBox =
-                this._getAppDisplayBoxForState(transitionParams.finalState, ...params);
+        if (this._appDisplay.visible) {
+            const workspaceAppGridBox =
+                this._cachedWorkspaceBoxes.get(ControlsState.APP_GRID);
+
+            params = [box, searchHeight, dashHeight, workspaceAppGridBox];
+            let appDisplayBox;
+            if (!transitionParams.transitioning) {
+                appDisplayBox =
+                    this._getAppDisplayBoxForState(transitionParams.currentState, ...params);
+            } else {
+                const initialBox =
+                    this._getAppDisplayBoxForState(transitionParams.initialState, ...params);
+                const finalBox =
+                    this._getAppDisplayBoxForState(transitionParams.finalState, ...params);
+
+                appDisplayBox = initialBox.interpolate(finalBox, transitionParams.progress);
+            }
 
-            appDisplayBox = initialBox.interpolate(finalBox, transitionParams.progress);
+            this._appDisplay.allocate(appDisplayBox);
         }
-        this._appDisplay.allocate(appDisplayBox);
 
         // Search
         childBox.set_origin(0, searchHeight + spacing);
@@ -500,6 +503,12 @@ class ControlsManager extends St.Widget {
         this._thumbnailsBox.ease(params);
     }
 
+    _updateAppDisplayVisibility() {
+        this._appDisplay.visible =
+            this._stateAdjustment.value > ControlsState.WINDOW_PICKER &&
+            !this._searchController.searchActive;
+    }
+
     _update() {
         const params = this._stateAdjustment.getStateTransitionParams();
 
@@ -512,13 +521,14 @@ class ControlsManager extends St.Widget {
         fitModeAdjustment.value = fitMode;
 
         this._updateThumbnailsBox();
+        this._updateAppDisplayVisibility();
     }
 
     _onSearchChanged() {
         const { searchActive } = this._searchController;
 
         if (!searchActive) {
-            this._appDisplay.show();
+            this._updateAppDisplayVisibility();
             this._workspacesDisplay.reactive = true;
             this._workspacesDisplay.setPrimaryWorkspaceVisible(true);
         } else {
@@ -531,7 +541,7 @@ class ControlsManager extends St.Widget {
             opacity: searchActive ? 0 : 255,
             duration: SIDE_CONTROLS_ANIMATION_TIME,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-            onComplete: () => (this._appDisplay.visible = !searchActive),
+            onComplete: () => this._updateAppDisplayVisibility(),
         });
         this._workspacesDisplay.ease({
             opacity: searchActive ? 0 : 255,